<template>
  <div class="houseItem">
    <div class="swiper">
      <img :src="itemData.defaultPicture" alt="">
      <div class="side-bar">
        <!-- 侧边栏 -->
        <side-bar :item-data="getToolBarData"></side-bar>
      </div>
      <div class="bottom">
        <span class="score">{{ itemData.commentBrief.overall }}分</span>
        <span class="text">{{ itemData.commentBrief.scoreTitle }}</span>
      </div>
    </div>
    <div class="infos">
      <div class="address">
        <span class="name">{{ itemData.address }}</span>
        <span class="unit">{{ itemData.unitSummeries[0].text }}</span>
        <span class="deps">{{ itemData.unitSummeries[1].text }}</span>
      </div>
      <div class="title">{{ itemData.unitName }}</div>
      <div class="tag">
        <template v-for="(tag, index) in itemData.houseTags">
          <van-tag :color="tag.background
          .color" :text-color="tag.color" type="warning">{{ tag.text }}</van-tag>
        </template>
      </div>

      <div class="price">
        <span class="real-price">{{ itemData.finalPrice }}</span>
        <span class="old-price">¥{{ itemData.productPrice }}</span>
        <van-tag v-if="itemData.priceTipBadge" round color="rgb(251, 74, 74)" text-color="#fff">
          <i class="icon-unit-sound"></i>
          {{ itemData.priceTipBadge.text }}
        </van-tag>
      </div>
      <div v-if="itemData.promoContent" class="footer">
        <van-tag round color="transparent" text-color="#f66">{{
            itemData.promoContent
        }}</van-tag>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import sideBar from './sideBar.vue'
const props = defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})
const houseData = ref({})
watch(props.itemData, (newVal) => {
  houseData.value = newVal
},
  { immediate: true })




const getToolBarData = computed(() => {
  let data = houseData.value;
  let favoriteCount = 0;
  let totalCount = 0;
  if (data.preloadHouse) {
    favoriteCount = data.preloadHouse.favoriteCount;
    totalCount = data.preloadHouse.totalCount;
  } else {
    totalCount = data.commentBriefForCD.totalCount;
  }
  return {
    logoUrl: data.logoUrl,
    favoriteCount,
    totalCount,
  };
});
</script>

<style lang="less" scoped>
.houseItem {
  .swiper {
    position: relative;

    img {
      width: 100%;
      border-radius: 10px;
    }

    .side-bar {
      position: absolute;
      right: 5px;
      top: 15px
    }

    .bottom {
      width: 20%;
      position: absolute;
      bottom: 15px;
      left: 10px;
      right: 10px;
      background: hsla(0, 0%, 100%, 0.9);
      display: flex;
      justify-content: center;
      border-radius: 10px;
      font-size: 12px;
      padding: 2px 4px;

      .score {
        font-weight: 700;
        color: #333
      }

      .text {
        margin-left: 8px;
        padding-right: 2px;
        color: #666
      }
    }
  }

  .infos {
    margin: 8px 0;

    .address {
      font-size: 12px;

      .name {
        color: rgb(255, 255, 255);
        background: rgb(63, 73, 84);
        padding: 2px 2px;
        border-radius: 2px;
      }

      .unit {
        margin: 0 10px;
        color: #666;
      }

      .deps {
        color: #666;
      }
    }

    .title {
      line-height: 22px;
      font-size: 18px;
      margin-top: 8px;
      font-weight: 500;
    }

    .tag {
      margin-top: 5px;

      :deep(.van-tag) {
        margin-right: 6px;
      }

    }

    .price {
      margin-top: 3px;
      margin-bottom: 7px;

      .real-price {
        position: relative;
        top: 1px;
        color: #ff9645;
        font-size: 20px;
        padding-right: 10px;
        padding-left: 1px;

        &::before {
          content: "¥";
          bottom: 0;
          font-size: 14px;
          padding-right: 3px;
        }
      }

      .old-price {
        font-weight: 500;
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
        padding-right: 5px;
      }

      .icon-unit-sound {
        margin-right: 5px;
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(https://fe.tujiacdn.com/pwa/static/fevueui/images/unit-item-m/icon-unit-sound.png);
        background-size: 10px 10px;
        background-repeat: no-repeat;
        background-position: 50%;
      }
    }

    .price :deep(.van-tag) {
      position: relative;
      font-size: 12px;
      transform: scale(0.9);
    }
  }
}
</style>